<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>json-to-show</title>
    <style>
        
        table{border-collapse:collapse;margin:10px;}
        th,td{border:1px solid #000;}
        th{ background:#eee;}
        
    </style>
        
    <!-- Site CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--<link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">-->
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/assets/js/html5shiv.min.js?v=1f65f1e951"></script>
      <script src="/assets/js/respond.min.js?v=1f65f1e951"></script>
    <![endif]-->
     <script src="http://tool.zhuogg.com/igg/def.js"></script>
    
</head>
<body>
 <div class="container">
       <h2>check lines</h2>
   
    <div class="row">
        <div class="col-sm-12">
            <textarea id="text" class="form-control" rows="10">
type=head;appId=5krose;deviceId=35588805669545400000000000000000;os=android;version=1000000000;down=ggps;lang=zh;checksum=cfc89387050fcc5b15237568e32807c1;
type=feedback;about=bug;file=20150725/android/feedback_2001001440_1437799413032.zip;content=sasssss;time=1437799415844;
from:192.168.17.253 time:1437801443870
type=head;appId=5krose;deviceId=35588805669545400000000000000000;os=android;version=1000000000;down=ggps;lang=zh;checksum=b5f998d55f187d2affbb3b2a56588d3f;
type=feedback;about=bug;file=20150725/android/feedback_2001001440_1437801475522.zip;content=ssssssssssa;time=1437801476562;
from:192.168.17.253 time:1437801593817
type=head;appId=5krose;deviceId=35588805669545400000000000000000;os=android;version=1000000000;down=ggps;lang=zh;checksum=91ba5bb756107b32ba462a8c7b0eb705;
type=feedback;about=bug;file=20150725/android/feedback_2001001440_1437801643587.zip;content=aaaaaaaaaaaa;time=1437801644558;
            </textarea>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-12">
            <br>
           <button id="btn" class="btn btn-primary"  >校验</button>
            <button id="btn2" class="btn"  >清空</button>
        </div>
    </div>
    
       <div class="row">
        <div class="col-sm-12">
             <!--<textarea id="show2" class="form-control" rows="10"></textarea>-->
             <div id="show"></div>
        </div>
    </div>
   
   <hr>
  
   
 </div>

   
       <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   
   <script type="text/JavaScript">
        function log(w){
           // console.log.apply(this,arguments);
             console.log(w);
        }
       
        function addShell(val,shell,attr){
            if(attr){}else{
                attr='';
            }
            return '<'+shell+' '+attr+'>'+val+'</'+shell+'>';
        }
        
        var red_atrr='style="color:red"',
        green_atrr='style="color:green"',
        yellow_attr='style="color:blue"';
        function toShow(line){
            if(line.indexOf('type') !=0){
                return line;
            }
           
            var kvs=line.split(";");
            
            var obj={};
            for(var i=0;i<kvs.length;i++){
                
               var kv=kvs[i].split("=");
               if(kv.length < 2){
                    continue;
                }
               var key=kv[0],val=kv[1];
               
               obj[key]=val;
            
               
            }
            
            if(!def[obj.type]){
                if(obj.type == 'head')
                 return line;
                else 
                 return addShell(line,'font',red_atrr);
            }
            
            var html = addShell(
                addShell('type*','th')+ addShell(obj.type,'td')
                 ,
                'tr');
            var has_red=false;
            $.each(def[obj.type],function(k,v){
                var _val=obj[k];
                var _atrr='';
                if(typeof _val === 'undefined'){
                     if(v.star){
                        _atrr=red_atrr; 
                         has_red=true;
                     }else{
                         _atrr=yellow_attr;
                     }
                    
                    
                   
                   
                }
                html+=addShell(
                addShell(k+ (v.star?'*':''),'th',_atrr)+ addShell(_val,'td',_atrr)
                 ,
                'tr');
            })
            
            return addShell(line,'font',has_red?red_atrr:green_atrr)+'<br>'+addShell(html,'table');
        }
    
   
 
 

       var $text =$('#text');
        var $show =$('#show');
        var handler=function(){
 
            var str=$text.val();
            str=str.replace(/<VaLuE>(.|\s)+?<\/VaLuE>/ig,'~~BIGTEXT~~');
            var arr=$.trim(str).split('\n');
    
          var out=[];
          $.each(arr,function(key,line){
               log("----------:"+line);
               try{
                 out.push(toShow(line));
               }catch(e){
                   log(e);
               }
          });
          
           
          
           $show.html(out.join('<br/>'));
          
        };
       // $text.change(handler);
        $('#btn').click(handler);
        $('#btn2').click(function(){
            $('#text').val('');
        });

   </script>
</body>

</html>